<template>
  <div class="bannerEdit detailView pd-20">
    <Form :model="item"
          label-position="right"
          :label-width="100"
          :rules="rules"
          ref="banner">
      <FormItem label="标题"
                prop="title">
        <Input v-model="item.title"
               type="text" />
      </FormItem>
      <FormItem label="摘要"
                prop="despContent">
        <Input v-model="item.despContent"
               type="text" />
      </FormItem>
      <FormItem label="位置类型"
                prop="positionType">
        <Select v-model="item.positionType"
                style="width:200px">
          <Option v-for="(positionType,index) in positionTypeList"
                  :value="positionType.code"
                  :key="index">{{ positionType.name }}</Option>
        </Select>
      </FormItem>
      <FormItem label="排序编号"
                prop="sortNum">
        <!--<Input v-model="item.sortNum" type="text" style="width:100px" />-->
        <InputNumber v-model="item.sortNum"></InputNumber>
      </FormItem>
      <FormItem label="是否显示">
        <i-switch v-model="item.isShow"></i-switch>
      </FormItem>
      <FormItem label="图片"
                prop="imageUrl">
        <upload ref="upload"
                :fileUploadAction="fileUploadAction"
                :multiple="multiple"
                :imageList="item.imageUrl"
                @setUrl="setUrl"
                :uploadListLength="uploadListLength"></upload>
      </FormItem>
      <FormItem label="图片大小">
        {{item.fileSize}}
      </FormItem>
      <FormItem label="图片宽度"
                prop="width">
        <Input v-model="item.width"
               type="text" />
      </FormItem>
      <FormItem label="图片高度"
                prop="height">
        <Input v-model="item.height"
               type="text" />
      </FormItem>
      <FormItem label="图片规格">
        <!--<Input v-model="item.imageSpeci" type="text" disabled/>-->
        {{item.width}}_{{item.height}}
      </FormItem>
      <FormItem label="链接地址">
        <Input v-model="item.linkUrl"
               type="text" />
      </FormItem>
      <FormItem label="内容"
                prop="content">
        <Input v-model="item.content"
               type="textarea"
               :rows="4" />
      </FormItem>
      <FormItem label="备注">
        <Input v-model="item.remark"
               type="textarea"
               :rows="4" />
      </FormItem>
      <FormItem label="展示医院">
        <Select v-model="item.hospitalIdList"
                filterable
                @on-query-change='remoteMethod1'
                clearable
                multiple
                placeholder="请输入医院名称">
          <Option v-for="(option, index) in options1"
                  :value="option.id"
                  :key="index">{{option.name}}</Option>
        </Select>
      </FormItem>
    </Form>
    <div class="operationView">
      <Button type="primary"
              class="operation_btn"
              @click="handleCancle">取消</Button>
      <Button type="primary"
              class="operation_btn"
              @click="handleSave">保存</Button>
    </div>
  </div>
</template>

<script>
  import { activityMgt } from '@/api/codeName'
  import Upload from '@/base/upload/upload'
  export default {
    name: "bannerEdit",
    data () {
      let validateSortNum = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入排序编号'))
        } else {
          callback()
        }
      }
      let validatePositionType = (rule, value, callback) => {
        if (value == null) {
          callback(new Error('请选择位置类型'))
        } else {
          callback()
        }
      }
      return {
        options1: [],
        item: {
          id: 0,
          title: '',
          isShow: true,
          fileSize: '0KB',
          sortNum: null,
          imageUrl: '',
          positionType: null,
          remark: '',
          despContent: '',
          content: '',
          imageSpeci: '',
          width: '',
          height: '',
          hospitalIdList: []
        },
        fileUploadAction: this.api.file.upload,
        multiple: false,
        uploadListLength: 1,
        positionTypeList: activityMgt.bannerMgt.positionType,
        rules: {
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          despContent: [
            { required: true, message: '请输入摘要', trigger: 'blur' }
          ],
          positionType: [
            { validator: validatePositionType, trigger: 'change' }
          ],
          sortNum: [
            { validator: validateSortNum, trigger: 'blur' }
          ],
          imageUrl: [
            { required: true, message: '请选择上传的图片', trigger: 'blur' }
          ],
          width: [
            { required: true, message: '请输入图片宽度', trigger: 'blur' }
          ],
          height: [
            { required: true, message: '请输入图片高度', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '请输入内容', trigger: 'blur' }
          ]
        },
      }
    },
    mounted () {
      if (this.$route.query.id) {
        this._getViewById()
        // this.remoteMethod1('')
      } else {
        this.remoteMethod1('')
      }
    },
    methods: {
      remoteMethod1 (val) {
        this.post(this.api.hospitalManager.list, { "pageSize": 100, "pageStart": 0, "name": val }).then((res) => {
          this.options1 = res.data.object;
          this.options1 = this.options1.concat(this.item.hospitalList)
          this.item.hospitalIdList = []
          this.item.hospitalList.forEach(ele => {
            this.item.hospitalIdList.push(ele.id)
          })
        });
      },
      handleCancle () {
        this.$router.back(-1)
      },
      handleSave () {
        this.$refs['banner'].validate((valid) => {
          if (valid) {
            let obj = Object.assign({}, this.item)
            obj.hospitalIdList = obj.hospitalIdList.join(',')
            obj.imageSpeci = obj.width + '_' + obj.height
            obj.isShow = obj.isShow ? 1 : 0
            this.ajax({
              type: this.api.bannerEdit.type,
              url: this.api.bannerEdit.url,
              data: obj,
              success: (data) => {
                this.$Message.success('保存成功');
                this.handleCancle()
              },
              error: (data) => {
                this.$Message.error(data.message);
              }
            })
          }
        })
      },
      setUrl (file) {
        this.item.imageUrl = file.url
        this.item.fileSize = file.size ? `${(file.size / 1024).toFixed(2)} KB` : '0KB'
      },
      _getViewById () {
        this.ajax({
          type: this.api.bannerView.type,
          url: this.api.bannerView.url,
          data: {
            id: this.$route.query.id != undefined ? this.$route.query.id : ''
          },
          success: (data) => {
            this.item = data.object
            this.item.isShow = this.item.isShow ? true : false
            if (this.item.hospitalList && this.item.hospitalList.length) {
              this.remoteMethod1('')
            }

            this.$refs.upload.setImg(this.item.imageUrl)
          },
          error: (data) => {
            this.$Message.error(data.message);
          }
        })
      }
    },
    components: {
      Upload
    }
  }
</script>

<style scoped lang="scss" type="text/scss" rel="stylesheet/scss">
  .bannerEdit {
  }
</style>
